<template>
	<div class="mainCon" v-loading="load" element-loading-text="人员数据同步中，大约需要3-5分钟......">

		<div class="inlineblock tree">
			<!--<el-tree :data="treedata" default-expand-all :expand-on-click-node="false" :props="defaultProps" @node-click="handleNodeClick"></el-tree>-->
			<el-tree :props="defaultProps"   :load="loadNode" lazy node-key="code" :expand-on-click-node="false" @node-click="handleNodeClick" ref = "treeData"
			 :highlight-current="true"
			:default-expanded-keys="['quanbuzuzhi']"
  			:default-checked-keys="['quanbuzuzhi']"> </el-tree>
		</div>
		<div class="inlineblock treeright">
			<div class="penalrow selectw100" style="padding-left: 0;">
				<div class="inlineblock verticalmiddle infoitem">
					<!--<div class="inlineblock verticalmiddle" style="margin-left: 5px;">
		                姓名
		              </div>-->
					<div class="inlineblock verticalmiddle" style="margin-left:5px;">
						<el-input style="" v-model="keyName" size="mini" placeholder="职员名称" @keyup.enter.native="doSearch"></el-input>
					</div>
					<div class="inlineblock  infoitem">
						<div class="inlineblock searchIcon" style="margin-left:15px;">
							<el-button size="mini" @click="doSearch">搜索</el-button>
						</div>
						<div class="inlineblock verticalmiddle searchIcon">
							<el-button size="mini" @click="empty">清空</el-button>
						</div>
					</div>
				</div>
			</div>
			<div class="separaterow tableCon">
				<div class="tableTittle">
					<div><span class="fontImpact">1</span><span>职员管理</span></div>
					<el-button type="primary" size="mini" @click="syncUser" style="float:right">同步</el-button>
					<el-button type="primary" size="mini" @click="addStaff" style="float:right;margin-right:8px;">添加</el-button>
				</div>
				<el-table :data="userData" style="width: 100%" class="tableCon" size="mini">
					<el-table-column label="序号" fixed min-width="50px">
						<template slot-scope="scope">
							{{scope.$index+1}}
						</template>
					</el-table-column>
					<el-table-column property="name" label="姓名" fixed min-width="100px">
					</el-table-column>
					<el-table-column property="status" label="状态" width="50px">
						<template slot-scope="scope">
							{{scope.row.status == 0 ? '在职' : (scope.row.status == 1 ? '离职' : '')}}
						</template>
					</el-table-column>
					<el-table-column property="loginid" label="账号" min-width="100px">
					</el-table-column>
					<!-- <el-table-column property="sex" label="性别" width="60px">
						<template slot-scope="scope">
							{{scope.row.sex == 1 ? '男' :(scope.row.sex == 2 ? '女' : '')}}
						</template>
					</el-table-column> -->
					<el-table-column property="mobile" label="手机" width="110px">
					</el-table-column>
					<el-table-column property="email" label="e-mail" min-width="180px">
					</el-table-column>
					<el-table-column property="departmentname" label="所属单位" min-width="130px">
					</el-table-column>
					<!--<el-table-column property="station" label="岗位" width="160px">
					</el-table-column>
					<el-table-column property="group" label="班组职务" width="160px">
					</el-table-column>-->
					<!--<el-table-column property="n" label="工号"    min-width="160px">
					</el-table-column>-->
					<el-table-column  label="操作" min-width="150px" >
						<template slot-scope="scope">
		                  <el-button  type="text" size="mini" @click.native="handleEdit(scope.row)">编辑</el-button>
                      <el-button  type="text" size="mini" @click.native="handleDelete(scope.row)">删除</el-button>
                      <el-button  type="text" size="mini" @click.native="changePassWd(scope.row)">重置密码</el-button>
		                </template>
					</el-table-column>

				</el-table>
				<div class="block  floatright" style="margin-top: 10px;">
					<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="staffQuery.page" :page-sizes="[20,30,40,50]" :page-size="staffQuery.pageCount" layout="total, sizes, prev, pager, next, jumper" :total="rowNumber">
					</el-pagination>
				</div>

			</div>

		</div>
		<div v-if="addDepartShow">
			<div class="popupMask">
				<div class="popupPenal">
					<div class="popPenalTitle">
						<div class="popPenalTitleName">
							{{newOrEdit== 'new' ?'添加':'编辑'}}人员
						</div>
						<div class="popupClose ensure">
							<el-button type="primary" size="mini" @click="submitStaff">保存</el-button>
						</div>
						<div class="popupClose">
							<el-button size="mini" v-on:click="resetForm">关闭</el-button>
						</div>
					</div>
					<div class="penalContent" style="padding:15px;">
						<el-form label-width="80px" :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm addStaffForm">

							<el-form-item label="姓名" prop="name">
								<el-col :span="22">
									<el-input placeholder="姓名" v-model='ruleForm.name'></el-input>

								</el-col>
							</el-form-item>
							<el-form-item label="账号" prop="loginid">
								<el-col :span="22">
									<el-input placeholder="账号" v-model='ruleForm.loginid'></el-input>

								</el-col>
							</el-form-item>
							<el-form-item label="电话" prop="phone">
								<el-col :span="22">
									<el-input placeholder="电话" v-model='ruleForm.phone'></el-input>

								</el-col>
							</el-form-item>
							<!-- <el-form-item label="性别" prop="sex">
								<el-col :span="22">
									<el-select v-model="ruleForm.sex" placeholder="请选择" style="width: 100%;">
											<el-option  v-for="item in sexOptions" :key="item.value" :label="item.label" :value="item.value">
											</el-option>
									</el-select>
								</el-col>
							</el-form-item> -->
							<el-form-item label="e-mail" prop="email">
								<el-col :span="22">
									<el-input placeholder="e-mail" v-model='ruleForm.email'></el-input>

								</el-col>
							</el-form-item>
							<el-form-item label="手机" prop="mobile">
								<el-col :span="22">
									<el-input placeholder="手机" v-model='ruleForm.mobile'></el-input>

								</el-col>
							</el-form-item>
							<el-form-item label="状态" prop="status">
								<el-col :span="22">
									<el-select v-model="ruleForm.status" placeholder="请选择" style="width: 100%;">
										<el-option  v-for="item in staffStatus" :key="item.value" :label="item.label" :value="item.value">
										</el-option>
									</el-select>
								</el-col>
							</el-form-item>
						</el-form>
					</div>

				</div>
			</div>
		</div>
    <!-- <changePsd  :addVisible.sync="changeShow" ></changePsd> -->
  </div>
</template>

<script>
//	import publiccss from '../assets/css/public.css';
import { mapState } from 'vuex'
// import changePsd from './children/changePsd.vue';
export default {
	data() {
		return {
			keyName: '',
			userData: [],
			treedata: [],
			defaultProps: {
				children: 'childs',
				label: 'shortname',
				isLeaf: 'leaf'
			},
			staffQuery: {
				page: 1, //第几页
				pageCount: 20 //页面得记录条数
			},
			orgcode: '',
			rowNumber: 0,
			load: false,
			addDepartShow: false,
			newOrEdit: "new",
			ruleForm: {
				name: null,
				loginid:null,
				sex:null,
				mobile:null,
				email:null,
				phone:"",
				status:0,

			},
			rules: {
				name: [
					{ type: 'string', required: true, message: '请填写名称', trigger: 'blur' },
				],
				loginid:[
					{ type: 'string', required: true, message: '请填写账号', trigger: 'blur' },
				]
			},
			treeVal:{},
			staffStatus:[
				{
					value:0,
					label:"在职"
				},
				{
					value:1,
					label:"离职"
				},
			],
      sexOptions:[
        {
        	value:2,
        	label:"女"
        },
        {
        	value:1,
        	label:"男"
        },
      ],
      changeShow:false,

		};
	},
	mounted() {
		// departmenttree.getData(this);

		this.cmdfind(this.staffQuery);
	},
  comments:{
      // changePsd
  },
	methods: {
    changePassWd(row){
      console.log(row)
        this.$http({
        	apiUrl: 'systemmanage/resetPassword.htm',
        	method: "post",
        	params: {
        		account: row.loginid,
            password:"123456",
        	},
        	isJson: false,

        }).then(res => {
        	if (res.code == 0) {
              this.$message({
                duration:120000,
                showClose: true,
              	type: 'success',
              	message: "重置成功,初始密码为123456",
              })
        	}
        })
    },
		empty() {
			this.keyName = '';
			this.staffQuery.page = 1
			this.cmdfind(this.staffQuery);
		},
		doSearch(){
			this.staffQuery.page = 1
			this.cmdfind(this.staffQuery);
		},
		getData(data) {
			return new Promise((resolve, reject) => {
				this.$http({
					apiUrl: 'systemmanage/newDepartmentTree.htm',
					method: "post",
					params: {
						code: data.code
					},
					isJson: false,

				}).then(res => {
					if (res.code == 0) {
						resolve(res)
					}
				})
			})
		},
		loadNode(node, resolve) {
			if (node.level === 0) {
				resolve([{ shortname: '所有组织' ,code:"quanbuzuzhi",}])
			}
			if (node.level >= 1){
				this.getData(node.data).then(res => {
					resolve(res.data);
					// this.$nextTick(() => {
					// 	this.$refs.treeData.setCurrentKey(this.treeVal);
					// })
				})
			}
		},
		handleNodeClick(data) {
			console.log(data)
			this.treeVal = data;
			this.orgcode = data.code;
			this.staffQuery.page = 1
			this.cmdfind(this.staffQuery);
		},
		cmdfind(parp) {
			var sendData = {
				name: this.keyName,
				orgcode: this.orgcode,
				page: parp.page, //第几页
				pageCount: parp.pageCount //页面得记录条数
			};

			this.$http({
				method: 'post',
				apiUrl: 'systemmanage/staffquery.htm',
				params: sendData,
				isJson: false,
			}).then(res => {
				if (res.code === 0) {
					this.userData = res.data;
					if (!res.pageinfo) {
						this.rowNumber = 0;
					} else if (res.pageinfo && !res.pageinfo.rowNumber) {
						this.rowNumber = 0;
					} else {
						this.rowNumber = res.pageinfo.rowNumber;
					}
				}

			})

		},
		syncUser() {
			this.load = true;
			this.$http({
				method: 'post',
				apiUrl: '/systemmanage/newSyncUser.htm',
			}).then(res => {
				this.load = false;
				if (res.code === 0) {

					this.cmdfind(this.staffQuery);
				}

			})
		},
		addStaff() {
			if (JSON.stringify(this.treeVal) == "{}" || this.treeVal.id == undefined) {
				this.$message({
					type: 'info',
					message: '请选中组织！'
				})
			} else {
				this.addDepartShow = true;
				this.newOrEdit = "new"
			}

		},
		handleEdit(row) {
			console.log(row)
			for (var i in row) {
				this.ruleForm[i] = row[i]
			}
			this.addDepartShow = true;
			this.newOrEdit = "edit"
		},
		submitStaff() {
			this.$refs.ruleForm.validate((valid) => {  //表单验证
				if (valid) {
					var data = this.ruleForm

					if (this.newOrEdit == 'new') {
						console.log(this.treeVal)
						var url = 'systemmanage/addManEmployee.htm';
						data.orgcode = this.treeVal.code;
						if(this.treeVal.datacenterkey != undefined){
							data.datacenterkey = this.treeVal.datacenterkey;
						}
						data.departmentid = this.treeVal.id

					} else {
						var url = 'systemmanage/updateManEmployee.htm';

					}
					this.$http({
						method: 'post',
						apiUrl: url,
						params: data,
						isJson: true,
					}).then(res => {
						if (res.code == 0) {
							this.$message({
								type: 'success',
								message: '提交成功!'
							});
							this.handleNodeClick(this.treeVal)
							this.resetForm()
						}

					})
				}
			})

		},
		//删除
		handleDelete(row) {
			this.$confirm('是否删除', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				var that = this;
				var param = {
					id: row.id,
				}
				this.$http({
					apiUrl: 'systemmanage/delManEmployee.htm',
					type: 'post',
					params: param,
				}).then(res => {
					if (res.code === 0) {
						this.$message({
							type: 'success',
							message: '删除成功!'
						});
						this.handleNodeClick(this.treeVal)
					}
				});
			}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消删除'
				});
			});
		},
		resetForm() {
			this.$refs.ruleForm.resetFields();//重置表单
			this.addDepartShow = false;
			this.ruleForm = {
				name: null,
				loginid:null,
				sex:null,
				mobile:null,
				email:null,
				phone:null,
				status:0,
			};
		},

		handleCurrentChange: function(val) {
			this.staffQuery.page = val;
		},
		handleSizeChange: function(val) {
			this.staffQuery.pageCount = val;
		},

	},
	watch: {
		staffQuery: {
			handler(val, oldVal) {
				this.cmdfind(this.staffQuery)
			},
			deep: true
		},

	},
}


</script>

<style scoped>
.addStaffForm .el-form-item{
	width:48%;
	margin-bottom:15px;
	/*float: left;*/
	display:inline-block;
}
.tree {
	width: 23%;
	height: 100%;
	overflow: auto;
	background: #fff;
}
.treeright {
    margin-left: 10px;
    width: calc(76% - 10px);
    height: 100%;
    vertical-align: top;
}
.infoitem {
  width: calc(100%/2);
  padding-right: 20px;
}
</style>
